<!--河道综合管理页面-->
<style lang="less">
.river {
  margin: 15px;
  #map {
    width: 100%;
    max-height: 100%;
  }
  .icon-btn {
    font-size: 20px;
    color: #555555;
  }
  .smallForm {
    display: inline-block;
  }
  .smallArr {
    width: 15%;
    display: inline-block;
  }
}
</style>

<template>
  <div class="river">
    <Card :bordered="false">
      <p slot="title"
         class="white">巡查管理 > <span class="select-font">河长日志</span>
      </p>
      <div>
        <Form :model="formItem"
              class="smallForm">
          <Input v-model="formItem.name"
                 :maxlength="30"
                 style="width:200px;"
                 placeholder="请输入用户名称" />
        </Form>
        <Button type="info"
                style="margin-left:25px"
                @click="getData('1')">搜索</Button>
      </div>
    </Card>
    <div class="">
      <Table :data="logData"
             :columns="logColumns"
             stripe></Table>
      <Page class="pull-right"
            :total="Page.total"
            :current="Page.current"
            :page-size="Page.pageSize"
            size="small"
            show-total
            @on-change="changePage"></Page>
    </div>
    <Modal title="查看河长日志内容"
           v-model="visible"
           width="800"
           :mask-closable="false">
      <Form :model="formItem"
            :label-width="100">
        <Form-item label="内容"
                   prop="content">
          <Input v-model="content"
                 :autosize="size"
                 type="textarea"
                 readonly></Input>
        </Form-item>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import tableDropdown from 'public/tableHeaderDropdown';
export default {
  data() {
    return {
      urlLogList: '/bus/journal/list',
      logData: [],
      visible: false,
      logColumns: [
        {
          title: '姓名',
          key: 'realname',
        },
        {
          title: '用户类型',
          renderHeader: (h, params) => {
            return h(tableDropdown, {
              props: {
                placement: 'bottom-start',
                showArrow: true,
                content: '用户类型',
                data: [
                  { value: 'all', name: '全部' },
                  { value: '0', name: '村级河长' },
                  { value: '1', name: '镇级河长' },
                  { value: '2', name: '区级河长' },
                  { value: '3', name: '市级河长' },
                  { value: '4', name: '河长办经办人' },
                  { value: '5', name: '职能人员' },
                  { value: '6', name: '河长助理' },
                  { value: '7', name: '河长办负责人' },
                ],
              },
              on: {
                'on-choosed': data => {
                  if (data !== 'all') {
                    this.formItem.user_type = data;
                    this.getData();
                  } else {
                    this.formItem.user_type = '';
                    this.getData();
                  }
                },
              },
            });
          },
          render: (h, param) => {
            if (param.row.user_type === '0') {
              return h('div', {}, '村级河长');
            } else if (param.row.user_type === '1') {
              return h('div', {}, '镇级河长');
            } else if (param.row.user_type === '2') {
              return h('div', {}, '区级河长');
            } else if (param.row.user_type === '3') {
              return h('div', {}, '市级河长');
            } else if (param.row.user_type === '4') {
              return h('div', {}, '河长办经办人');
            } else if (param.row.user_type === '5') {
              return h('div', {}, '职能人员');
            } else if (param.row.user_type === '6') {
              return h('div', {}, '河长助理');
            } else if (param.row.user_type === '7') {
              return h('div', {}, '河长办负责人');
            } else {
              return '';
            }
          },
        },
        {
          title: '日志标题',
          key: 'title',
        },
        {
          title: '日志时间',
          key: 'date_time',
        },
        {
          title: '日志内容',
          render: (h, param) => {
            let ret = param.row.content;
            ret = `${ret.substring(0, 10)}......`;
            return h('div', {}, ret);
          },
        },
        {
          title: '类型',
          renderHeader: (h, params) => {
            return h(tableDropdown, {
              props: {
                placement: 'bottom-start',
                showArrow: true,
                content: '类型',
                data: [
                  { value: 'all', name: '全部' },
                  { value: '0', name: '双月汇报' },
                  { value: '1', name: '年底汇报' },
                ],
              },
              on: {
                'on-choosed': data => {
                  if (data !== 'all') {
                    this.formItem.type = data;
                    this.getData();
                  } else {
                    this.formItem.type = '';
                    this.getData();
                  }
                },
              },
            });
          },
          render: (h, params) => {
            if (params.row.type === '0') {
              return h('div', {}, '双月汇报');
            } else if (params.row.type === '1') {
              return h('div', {}, '年底汇报');
            } else {
              return h('div', {}, '暂无数据');
            }
          },
        },
        {
          title: '操作',
          render: (h, param) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.visible = true;
                      this.content = param.row.content;
                    },
                  },
                },
                '查看内容'
              ),
            ]);
          },
        },
      ],
      formItem: {
        name: '',
        type: '',
        user_type: '',
      },
      Page: {
        current: 1,
        pageSize: 13,
        total: 0,
      },
      actionPage: '1',
      content: '',
      size: {
        minRows: 2,
      },
    };
  },
  methods: {
    getData(page) {
      let params = {
        data: {
          page,
          pageSize: this.Page.pageSize,
          searchValue: {},
          order: { date_time: -1 },
        },
        url: this.urlLogList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.logData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
        },
      };
      if (this.formItem.name !== '') {
        params.data.searchValue.realname = `${this.formItem.name}|#|like`;
      }
      if (this.formItem.type !== '') {
        params.data.searchValue.type = this.formItem.type;
      }
      if (this.formItem.user_type !== '') {
        params.data.searchValue.user_type = this.formItem.user_type;
      }
      ajaxPost(params);
    },
    changePage(page) {
      this.actionPage = page;
      this.getData(page);
    },
  },
  mounted() {
    this.getData('1');
  },
};
</script>
